<template>
    <div class="ClassRoomInfo">
        <div>
            <div class="Lvie-cl-de-con">
                <div class="Lvie-cl-de-con-head">
                    <div class="Lvie-cl-de-selel-langu">
                        <span>语言</span>
                        <el-select @change ="getclasslist()" v-model="value" filterable placeholder="请选择语言">
                            <el-option
                                v-for="(item,index) in options"
                                :key="index"
                                :label="item.name"
                                :value="item.spell">
                            </el-option>
                        </el-select>
                    </div>
                    <ul>
                        <li v-for="(item,index) in LiveSelectList" :key="index" @click="LiveSelect(index)" :class="LiveSelectListIndex==index?'Lvie-cl-de-con-select':''">{{item}}</li>
                    </ul>
                </div>
                <div class="Lvie-cl-de-con-con">
                    <ul v-if="LiveSelectListIndex==0">
                        <li v-for="(item,index) in DetailsClassroomList" :key="index" @click="Toclassroom(item)">
                            <div class="Lvie-cl-de-con-con-img">
                                <img :src="item.cover" />
                            </div>
                            <div class="Classidentifications">
                                <img src="/images/LIVE.png"/>
                                <!-- <img src="/images/icon@2x.png" v-if="item.status == 3" alt="">
                                <img src="/images/椭圆 30@2x.png" alt="">
                                <img src="/images/pc端-正在直播gif.gif" alt=""> -->
                                <span>{{item.age_grade}}·{{item.language_level}}</span>
                                
                            </div>
                            <div class="userinfo">
                                <img :src="item.map.userinfo.avatar" style="width:30px;height:30px;">
                                <span>{{item.map.userinfo.nick_name}}</span>
                            </div>
                            <div class="Lvie-cl-de-con-con-con">
                                <p>{{item.title}}</p>
                                <p style="color:#FF5757;font-size:18.03px;">{{item.language}}</p>
                                <p>
                                     <span v-if="item.status == 3">直播中</span>
                                    <span v-else-if="item.days ==0 & item.minutes == 0">距离开课{{item.hours}}小时</span>
                                    <span v-else-if="item.days == 0 & item.hours == 0">距离开课{{item.minutes}}分钟</span>
                                    <span v-else-if="item.Isend == 0">已结束</span>
    
                                    <span v-else>距离开课{{item.days}}天</span>
                                    <span class="Lvie-cl-de-con-con-auditions">去试听</span>
                                </p>
                            </div>
                        </li>
                        <li class="holder" v-for="(i,indax) in holder" :key="indax" style="cursor: auto;"></li>
                        <div v-if="DetailsClassroomList.length ==0" class="Noclass">
                            <label>
                                <img src="/images/暂无课程安排.png" alt="" class="noClassimg">
                                <span>暂无课程安排</span>
                            </label>
                        </div>
                    </ul>
                    <ul v-else-if="LiveSelectListIndex==1">
                        <li v-for="(item,index) in ageGradeList" :key="index" >
                            <div class="Lvie-cl-de-con-con-img">
                                <img :src="item.cover" />
                            </div>
                            <div class="Classidentifications">
                                <img src="/images/LIVE.png"/>
                                <span>{{item.age_grade}}·{{item.language_level}}</span>
                            </div>
                            <div class="Lvie-cl-de-con-con-con">
                                <p>{{item.title}}</p>
                                <p style="color:#FF5757;font-size:18.03px;">{{item.language}}</p>
                                <p>
                                    <span v-if="item.days ==0 & item.minutes == 0">距离开课{{item.hours}}小时</span>
                                    <span v-else-if="item.days == 0 & item.hours == 0">距离开课{{item.minutes}}分钟</span>
                                    <span v-else-if="item.Isend == 0">已结束</span>
                                    <span v-else>距离开课{{item.days}}天</span>
                                    <span class="Lvie-cl-de-con-con-auditions">去试听</span>
                                </p>
                            </div>
                        </li>
                        <li class="holder1" v-for="(i,indax) in holder1" :key="indax" style="cursor: auto;"></li>
                        <div v-if="ageGradeList.length ==0" class="Noclass">
                            <label>
                                <img src="/images/暂无课程安排.png" alt="" class="noClassimg">
                                <span>暂无课程安排</span>
                            </label>
                        </div>
                    </ul>
                    <ul v-else-if="LiveSelectListIndex==2">
                        <li v-for="(item,index) in ageGradeList" :key="index" >
                            <div class="Lvie-cl-de-con-con-img">
                                <img :src="item.cover" />
                            </div>
                            <div class="Classidentifications">
                                <img src="/images/LIVE.png"/>
                                <span>{{item.age_grade}}·{{item.language_level}}</span>
                            </div>
                            <div class="Lvie-cl-de-con-con-con">
                                <p>{{item.title}}</p>
                                <p style="color:#FF5757;font-size:18.03px;">{{item.language}}</p>
                                <p>
                                    <span style="font-size:14px;color:#C5C5C5;">免费试听3分钟</span>
                                    <span class="Lvie-cl-de-con-con-auditions">去试听</span>
                                </p>
                            </div>
                        </li>
                        <li class="holder1" v-for="(i,indax) in holder1" :key="indax" style="cursor: auto;"></li>
                        <div v-if="ageGradeList.length ==0" class="Noclass">
                            <label>
                                <img src="/images/暂无课程安排.png" alt="" class="noClassimg">
                                <span>暂无课程安排</span>
                            </label>
                        </div>
                    </ul>
                    <ul v-else-if="LiveSelectListIndex==3">
                        <li v-for="(item,index) in ageGradeList" :key="index" >
                            <div class="Lvie-cl-de-con-con-img">
                                <img :src="item.cover" />
                            </div>
                            <div class="Classidentifications">
                                <img src="/images/LIVE.png"/>
                                <span>{{item.age_grade}}·{{item.language_level}}</span>
                            </div>
                            <div class="Lvie-cl-de-con-con-con">
                                <p>{{item.title}}</p>
                                <p style="color:#FF5757;font-size:18.03px;">{{item.language}}</p>
                                <p>
                                    <span style="font-size:14px;color:#C5C5C5;">免费试听3分钟</span>
                                    <span class="Lvie-cl-de-con-con-auditions">去试听</span>
                                </p>
                            </div>
                        </li>
                        <li class="holder1" v-for="(i,indax) in holder1" :key="indax" style="cursor: auto;"></li>
                        <div v-if="ageGradeList.length ==0" class="Noclass">
                            <label>
                                <img src="/images/暂无课程安排.png" alt="" class="noClassimg">
                                <span>暂无课程安排</span>
                            </label>
                        </div>
                    </ul>
                    <ul v-else-if="LiveSelectListIndex==4">
                        <li v-for="(item,index) in ageGradeList" :key="index" >
                            <div class="Lvie-cl-de-con-con-img">
                                <img :src="item.cover" />
                            </div>
                            <div class="Classidentifications">
                                <img src="/images/LIVE.png"/>
                                <span>{{item.age_grade}}·{{item.language_level}}</span>
                            </div>
                            <div class="Lvie-cl-de-con-con-con">
                                <p>{{item.title}}</p>
                                <p style="color:#FF5757;font-size:18.03px;">{{item.language}}</p>
                                <p>
                                    <span style="font-size:14px;color:#C5C5C5;">免费试听3分钟</span>
                                    <span class="Lvie-cl-de-con-con-auditions">去试听</span>
                                </p>
                            </div>
                        </li>
                        <li class="holder1" v-for="(i,indax) in holder1" :key="indax" style="cursor: auto;"></li>
                        <div v-if="ageGradeList.length ==0" class="Noclass">
                            <label>
                                <img src="/images/暂无课程安排.png" alt="" class="noClassimg">
                                <span>暂无课程安排</span>
                            </label>
                        </div>
                    </ul>
                </div>
                <div class="Lvie-cl-de-con-pagination">
                    <el-pagination @current-change="handleCurrentChange" background layout="prev, pager, next" :total="1000"></el-pagination>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import citys from '../../../../public/citys/citys'
export default {
    name:'ClassRoomInfo',
    computed:{
        holder(){
            return 4 -(this.DetailsClassroomList.length%4)
        },
        holder1(){
            return 4 -(this.ageGradeList.length%4)
        },
    },
    data(){
        return{
            Ismember:false,
            dd:true,
            LiveSelectList:['推荐','儿童','少年','大学生','成年'],
            LiveSelectListIndex:0,
            DetailsClassroomList:[],
            options:[],
            value: '',
            languageEn:[
                {"Estonian":"爱沙尼亚语"},
				{"Arabic":"阿拉伯语"},
				{"Bulgarian":"保加利亚语"},
				{"Polish":"波兰语"},
				{"Danish":"丹麦语"},
				{"German":"德语"},
				{"Russian":"俄语"},
				{"Traditional Chinese":"繁体中文"},
				{"French":"法语"},
				{"Finnish":"芬兰语"},
				{"Korean":"韩语"},
				{"Dutch":"荷兰语"},
				{"Czech":"捷克语"},
				{"romanian":"罗马尼亚语"},
				{"Portuguese":"葡萄牙语"},
				{"Japanese":"日语"},
				{"Swedish":"瑞典语"},
				{"slovenian":"斯洛文尼亚语"},
				{"Thai":"泰语"},
				{"Spanish":"西班牙语"},
				{"Greek":"希腊语"},
				{"hun":"匈牙利语"},
				{"Italian":"意大利语"},
				{"English":"英语"},
				{"Vietnamese":"越南语"},
				{"cantonese":"粤语"},
				{"Chinese":"中文"}
            ],
            unserinfo:JSON.parse(localStorage.getItem('userinfo')),
            currentPage:1,
            thisindex:this.$route.query.index,
            Thetheme:[
                {"Scene/Restaurant":"场景/餐馆"},
                {"Scene/Post Office":"场景/邮局"},
                {"Scene/Hospital and health scene":"场景/医院及健康场景"},
                {"Scene/Hotel":"场景/酒店"},
                {"Scene/Shopping mall":"场景/商场购物"},
                {"Scene/Work and work scenes":"场景/商场工作和上班场景购物"},
                {"Scene/Airport":"场景/机场"},
                {"Scene/Farm":"场景/农场"},
                {"Scene/Campus":"场景/校园"},
                {"Scene/Travel":"场景/旅行"},
                {"Scene/Supermarket":"场景/超市"},
                {"Scene/Drive":"场景/驾驶"},
                {"Scene/Wedding":"场景/婚礼"},
                {"Scene/Cinema":"场景/电影院"},
                {"Scene/Entertainment place":"场景/娱乐场所"},
                {"Scene/Gymnasium":"场景/体育馆"},
                {"Scene/Museum":"场景/博物馆"},
                {"Scene/Bar or KTV":"场景/酒吧或KTV"},
                {"Topic/Self introduction":"主题/自我介绍"},
                {"Topic/Learning and education":"主题/学习教育"},
                {"Topic/Talk about music":"主题/聊聊音乐"},
                {"Topic/Talk about family":"主题/聊聊家人"},
                {"Topic/Talk about dressing":"主题/聊聊穿着"},
                {"Topic/Talk about friends":"主题/聊聊朋友"},
                {"Topic/Talk about delicious food":"主题/聊聊美食"},
                {"Topic/Festivals and customs":"主题/节日和习俗"},
                {"Topic/Talk about variety show":"主题/聊聊综艺节目"},
                {"Topic/Talk about the near future plan":"主题/聊聊近期计划"},
                {"Topic/Talking about hobbies":"主题/聊聊爱好"},
                {"Topic/Talk about learning":"主题/聊聊学习"},
                {"Topic/Talk about TV series":"主题/聊聊电视剧"},
                {"Topic/Talk about movies":"主题/聊聊电影"},
                {"Topic/Talk about work":"主题/聊聊工作"},
                {"Topic/How to learn the language well":"主题/怎么学好这个语言"},
                {"Topic/About tourism":"主题/关于旅游"},
                {"Topic/Talk about geography":"主题/聊聊地理"},
                {"Topic/Talking about ideals":"主题/谈谈理想"},
                {"Topic/Talk about love":"主题/聊聊爱情"},
                {"Topic/Talk about the weather":"主题/聊聊天气"},
                {"Topic/Talk about some interesting things":"主题/聊一些趣事"},
            ],
            ageGradeList:[],
        }
    },
    mounted() {
        this.getCitiesList()
        this.getclasslist()
    },
    methods: {
        getCitiesList(){
            for(let x in citys.cities){
                citys.cities[x].map(item=>{
                    this.options.push(item)
                })
            }
            console.log(this.options,'组装后的')
        },
        handleOpen(key, keyPath) {
            console.log(key, keyPath);
        },
        Tomemeber(){
            this.$router.push({path:'/views/Liveclassrooms/Themenberce'})
        },
        Toclassroom(e){
            console.log(e,'=>')
            if(e.Isend ==0){
                this.$router.push({path:'/views/Liveclassrooms/Teachingcentercoursedetails',query: {id: e.id,Isstudents:true,Isend:true}})
            }else{
                 this.$router.push({path:'/views/Liveclassrooms/Teachingcentercoursedetails',query: {id: e.id,Isstudents:true,Isend:false}})
            }
        },
        handleClose(key, keyPath) {
            console.log(key, keyPath);
        },
        handleSelect(){
            this.dd = false
        },
        checket(){
            this.$router.push({path:'/'})
        },
        chet(e){
            this.LenavListIndex = e
            this.getclasslist()
        },
        LiveSelect(e){
            this.LiveSelectListIndex = e
            this.getClassAge()
        },
        getClassAge(){
            var _this = this,age
            _this.ageGradeList = []
            if(this.LiveSelectListIndex == 1){
                age = 'Childhood'
            }else if(this.LiveSelectListIndex == 2){
                age = 'Teenagers'
            }else if(this.LiveSelectListIndex == 3){
                age = 'University Student'
            }else if(this.LiveSelectListIndex == 4){
                age = 'Adult'
            }
            var data ={
                type:"open_class",
                currentPage:_this.currentPage,
                pageSize:16,
                language:_this.value,
                age_grade:age
            }
            _this.$axios({
                method:'get',
                url:'http://101.37.66.151:8768/eg-api/user/masterAppointment/queryHomeListPage',
                params:data,
                }).then((res) =>{ 
                    _this.ageGradeList = res.data.data
                    _this.ageGradeList.forEach(function(i){
                        var days = _this.dateDiff(i.start_time)[0]
                        if(days>0){
                            i.days = _this.dateDiff(i.start_time)[0]
                            i.hours =0
                            i.minutes =0
                        }else if(days==0&_this.dateDiff(i.start_time)[1]>0){
                            i.days = 0
                            i.minutes =0
                            i.hours = _this.dateDiff(i.start_time)[1]
                            
                        }else if(_this.dateDiff(i.start_time)[1] == 0){
                            i.days = 0
                            i.hours =0
                            i.minutes = _this.dateDiff(i.start_time)[2]
                        }else if(_this.dateDiff(i.start_time)[2] ==0){
                            i.Isend = 1 
                        }else{
                            i.Isend = 0
                        }
                        
                        if(i['age_grade'] == "Teenagers"){
                            i['age_grade']='青少年'
                        }else if(i['age_grade'] == "Childhood"){
                            i['age_grade']='儿童'
                        }else if(i['age_grade'] == "University Student"){
                            i['age_grade']='大学生'
                        }else if(i['age_grade'] == "Adult"){
                            i['age_grade']='成年'
                        }
                        
                        if(i['language_level'] == "Zero basis"){
                            i['language_level']='零基础'
                        }else if(i['language_level'] =="Senior"){
                            i['language_level']='高级'
                        }else if(i['language_level'] =="Intermediate"){
                            i['language_level']='中级'
                        }else if(i['language_level'] =="Primary"){
                            i['language_level']='初级'
                        }
                        _this.languageEn.forEach(function(j){
                            if(j[i['language']]){
                                i['language']=j[i['language']]
                            }
                        })
                        _this.Thetheme.forEach(is=>{
                            if(is[i['title']]){
                                i['title'] = is[i['title']]
                            }
                        })
                    });
                    console.log(_this.ageGradeList,'aaa')
                }).catch((error) =>{
                console.log(error)
            })
        },
        getclasslist(){
            var _this = this
            _this.DetailsClassroomList = []
            var data ={
                type:"open_class",
                currentPage:_this.currentPage,
                pageSize:16,
                language:_this.value
            }
            _this.$axios({
                method:'get',//masterAppointment/queryListPage
                url:'http://101.37.66.151:8768/eg-api/user/masterAppointment/queryHomeListPage',
                params:data,
                }).then((res) =>{ 
                    console.log(res.data.data,'kechenginfo')
                    _this.DetailsClassroomList = res.data.data
                    _this.ChildhoodList = []
                    _this.TeenagersList = []
                    _this.UniversityList = []
                    _this.AdultList = []
                    _this.DetailsClassroomList.forEach(function(i){
                        var days = _this.dateDiff(i.start_time)[0]
                        if(days>0){
                            i.days = _this.dateDiff(i.start_time)[0]
                            i.hours =0
                            i.minutes =0
                        }else if(days==0&_this.dateDiff(i.start_time)[1]>0){
                            i.days = 0
                            i.minutes =0
                            i.hours = _this.dateDiff(i.start_time)[1]
                            
                        }else if(_this.dateDiff(i.start_time)[1] == 0){
                            i.days = 0
                            i.hours =0
                            i.minutes = _this.dateDiff(i.start_time)[2]
                        }else if(_this.dateDiff(i.start_time)[2] ==0){
                            i.Isend = 1 
                        }else{
                            i.Isend = 0
                        }
                        
                        if(i['age_grade'] == "Teenagers"){
                            i['age_grade']='青少年'
                        }else if(i['age_grade'] == "Childhood"){
                            i['age_grade']='儿童'
                        }else if(i['age_grade'] == "University Student"){
                            i['age_grade']='大学生'
                        }else if(i['age_grade'] == "Adult"){
                            i['age_grade']='成年'
                        }
                        
                        if(i['language_level'] == "Zero basis"){
                            i['language_level']='零基础'
                        }else if(i['language_level'] =="Senior"){
                            i['language_level']='高级'
                        }else if(i['language_level'] =="Intermediate"){
                            i['language_level']='中级'
                        }else if(i['language_level'] =="Primary"){
                            i['language_level']='初级'
                        }
                        _this.languageEn.forEach(function(j){
                            if(j[i['language']]){
                                i['language']=j[i['language']]
                            }
                        })
                        _this.Thetheme.forEach(is=>{
                            if(is[i['title']]){
                                i['title'] = is[i['title']]
                            }
                        })
                        if(i['age_grade'] =='儿童'){
                            _this.ChildhoodList.push(i)
                        }
                        if(i['age_grade'] == '青少年'){
                            _this.TeenagersList.push(i)
                        }
                        if(i['age_grade'] == '大学生'){
                            _this.UniversityList.push(i)
                        }
                        if(i['age_grade'] == '成年'){
                            _this.AdultList.push(i)
                        }
                    });
                    console.log(this.DetailsClassroomList,'555')
                }).catch((error) =>{
                console.log(error)
            })
        },
        dateDiff(sDate1) {
			var date2 = new Date();
            var date1 = new Date(Date.parse(sDate1.replace(/-/g,   "/")));
            var usedTime =date1.getTime()- date2.getTime()
            var days=Math.floor(usedTime/(24*3600*1000));
            if(days==0){
                var leave1=usedTime%(24*3600*1000);    //计算天数后剩余的毫秒数
                var hours=Math.floor(leave1/(60*60*1000));
                if(hours == 0){
                    var leave2=leave1%(24*3600*1000);    //计算天数后剩余的毫秒数
                    var minutes=Math.floor(leave2/(60*1000));
                }
            }else if(days == -1){
                var leave1s=usedTime%(24*3600*1000);    //计算天数后剩余的毫秒数
                var hours=Math.floor(leave1s/(60*60*1000));
                if(hours == -24){
                    var leave2s=leave1s%(24*3600*1000);    //计算天数后剩余的毫秒数
                    var minutess=Math.floor(leave2s/(60*1000));
                }
                
            }
            return [days,hours,minutes];
        },
        handleCurrentChange(val) {
            this.currentPage = val
            this.getclasslist()
            this.getClassAge()
        }
    }
}
</script>
<style lang="less" scoped>
.userinfo{
    top: 144px;
    position: absolute;
    left: 15px;
    color: #fff;
    span{
        margin-left: 10px;
    }
    
    img{
        border-radius: 15px;
        vertical-align: middle;
    }
}
.Noclass{
    position: relative;
    width: 90%;
    margin: 0 auto;
    height: 600px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    .noClassimg{
        width: 65px;
        height: 55px;
    }
}
.Noclass>label{
    width: 100%;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}
.Noclass>label>span{
    display: block;
    width: 100%;
    text-align: center;
    font-size: 18px;
    color: #d8d8d8;
    margin-top: 10px;
}
.ClassRoomInfo{
        width: 100%;
        // min-height: 1639px;
        height: auto;
        border-radius: 20px;
        background: #ffffff;
        img{
            width: 100%;
            height: 100%;
        }
        .Live-banner{
            margin-top: 20px;
            margin-bottom: 20px;
        }
    }
     .Lvie-cl-de-con{
        position: relative;
        // width: 100%;//有左侧导航状态
        width: 116%;//五左侧导航状态
        background: #ffffff;
        border-radius: 15px;
    }
    .Lvie-cl-de-con-head{
        position: relative;
        width: 100%;
        height: 80px;
        display: flex;
        border-bottom: 1px solid #47CECF;
        ul{
            list-style: none;
            display: flex;
            width: 100%;
            height: 100%;
            align-items: center;
            justify-content: flex-end;
            li{
                width: 10%;
                cursor: pointer;
            }
        }
    }
    .Lvie-cl-de-selel-langu{
        display: flex;
        width: 50%;
        align-items: center;
        justify-content: center;
        span{
            color: #C2C2C2;
            font-size: 14px;
        }
        /deep/.el-select{
            width: 50%;
            margin-left: 2%;         
        }
        /deep/.el-input__inner{
            border-radius: 20px;
            border: 1px #47CECF solid;
            font-weight: bold;
            color: #47CECF;
        }
    }
    .Lvie-cl-de-con-select{
        color: #47CECF;
        font-weight: bold;
    }
    .holder1,.holder{
        position: relative;
        width: 24%;
        height: auto;
        max-height: 280px;
        border-radius: 15px;
        overflow:hidden;
        margin-top: 40px;
        // height: 260px;
        opacity: 0;
    }
    .Lvie-cl-de-con-con{
        position: relative;
        width: 90%;
        margin: 0 auto;
        margin-top: 30px;
        ul{
            list-style: none;
            display: flex;
            flex-wrap: wrap;
            width: 100%;
            height: auto;
            justify-content: space-between;
            padding: 0%;
            li{
                position: relative;
                width: 24%;
                height: auto;
                max-height: 280px;
                cursor: pointer;
                border-radius: 15px;
                overflow:hidden;
                border: 1px solid #e7e7e7;
                margin-top: 40px;
                // height: 260px;
            }
        }
    }
    .Lvie-cl-de-con-con>ul>li:hover{
        box-shadow: 2px 14px 6px rgba(0, 0, 0, 0.1);
    }
    .Lvie-cl-de-con-con-img{
        width: 100%;
        height: 64%;
        overflow: hidden;
        img{
            width: 100%;
            height: auto;
            // max-width: 100%;
        }
    }
    .Classidentifications{
        display: flex;
        align-items: center;
        height: 32px;
        width: 100%;
        position: absolute;
        top: 8%;
        img{
            // margin-left: 5%;
            margin-top: -14%;
            width: auto;
            height: auto;
        }
        span{
            margin-left: auto;
            width: 88px;
            align-items: center;
            height: 32px;
            font-size: 12px;
            text-align: center;
            line-height: 32px;
            color: #00B6B7;
            background: #ffffff;
            border-top-left-radius: 20px;
            border-bottom-left-radius: 20px;
        }
    }
    .Lvie-cl-de-con-con-con{
        position: relative;
        width: 90%;
        overflow: hidden;
        background: #ffffff;
        margin: 0 auto;
        padding: 0;
        p{
            padding: 0;
            margin: 0px;
            height:30px;
            overflow: hidden;
            line-height: 30px;
            text-overflow:ellipsis;
            white-space: nowrap;
            span{
                height: 26px;
                line-height: 26px;
            }
        &:first-child{
            font-weight: bold;
        }
        }
    }
    .Lvie-cl-de-con-con-auditions{
        float: right;
        width:83px;
        height:33px;
        border:1px solid rgba(71,206,207,1);
        border-radius:20px;
        line-height: 33px;
        color: #47CECF;
        text-align: center;
        background-image: url("/images/多边形 2 拷贝.png");
        background-repeat: no-repeat;
        background-position: 93%;
        padding-left:0px;
    }
    .Lvie-cl-de-con-pagination{
        position: relative;
        width: 100%;
        height: 100px;
        margin-top: 100px;
        // margin-bottom: 40px;
        display: flex;
        justify-content: flex-end;
        margin-right: 100px;
    }
    .Lvie-cl-de-con-footer{
        background: #ffffff;
    }
</style>